import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Col, Row, Card, Image, Button, Input, Form, message } from 'antd';
//解析url查询参数
import qs from 'qs'

import { setMenus } from '../../redux/actions/menus'
import {
    login
} from '../../api/auth'
import {
    setLoginUser
} from '../../utils/storage'

import './index.css'
import Bg from './images/bg3.png';
import Background from './images/login-bg.jpg';

class Login extends Component {
    
    // 提交登录表单
    submitLogin = ({username, password}) => {
        login(username, password).then(res => {
            console.log('login(username, password)', res)
            setLoginUser(res)
            this.props.setMenus((menus) => {
                if (menus && menus.length) {
                    let {history, location} = this.props
                    let search = {}
                    if (location.search !== '') {
                        search = qs.parse(location.search.substr(1))
                    }
                    let {redirect, ...params} = search;
                    history.push(`${redirect || '/main'}${params ? '?' + qs.stringify(params): ''}`)
                } else {
                    message.error('当前用户暂无权限')
                }
            })
            
        });
    }
    
    render() {
        return (
            <div className="login" style={{ backgroundImage: `url(${Background})` }}>
                <Row></Row>
                <Row style={{ marginTop: '200px' }}>
                    <Col span={12} offset={6}>
                        <Card style={{ height: '550px' }} title="XXX后台管理系统" bordered={false} headStyle={{ fontSize: '30px', textAlign: 'center' }}>
                            <Row gutter={10}>
                                <Col span={12}>
                                    <Image src={Bg}></Image>
                                </Col>
                                <Col span={12} style={{ paddingTop: '50px' }}>
                                    <Form name="loginForm" autoComplete="off" style={{ margin: '60px' }}
                                        labelCol={{
                                            span: 8,
                                        }}
                                        wrapperCol={{
                                            span: 16,
                                        }}
                                        onFinish={this.submitLogin}
                                    >
                                        <Form.Item
                                            label="登录名"
                                            name="username"
                                            rules={[
                                                {
                                                    required: true
                                                },
                                            ]}
                                        >
                                            <Input />
                                        </Form.Item>

                                        <Form.Item
                                            label="密码"
                                            name="password"
                                            rules={[
                                                {
                                                    required: true
                                                },
                                            ]}
                                        >
                                            <Input.Password />
                                        </Form.Item>
                                        <Form.Item
                                            wrapperCol={{
                                                offset: 8,
                                                span: 16,
                                            }}
                                        >
                                            <Button type="primary" htmlType="submit">确定</Button>
                                        </Form.Item>
                                    </Form>
                                </Col>
                            </Row>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
})

const mapDispatchToProps = {
    setMenus
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)
